import React from 'react';
import { Link } from 'react-router-dom';
import { Select, DatePicker } from 'antd';
import axios from 'axios';
import { apiPrefix } from 'shared/api';
import './index.less';

const { Option } = Select;

export default class StateBook extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      CertificateStatistics: [],
      CertificateTypes: [],
      queryCertificate: {},
      countPerson: '',
      count: '',
    };
  }

  componentDidMount() {
    const api = `${apiPrefix}api/v1/certificate/statics`;
    const api2 = `${apiPrefix}api/v1/certificate/types`;
    axios.get(api)
      .then((response) => {
        console.log(response);
        this.setState({ CertificateStatistics: response.data.data, countPerson: response.data.count_person, count: response.data.count });
        console.log(this.state.CertificateStatistics);
      });
    axios.get(api2)
      .then((response) => {
        this.setState({ CertificateTypes: response.data.data });
      });
  }
  handlOnChange=(value, key) => {
    console.log(value, key);
    const { queryCertificate } = this.state;
    queryCertificate[key] = value;
    this.setState({ queryCertificate: { ...this.state.queryCertificate } });
  }
  query=() => {
    axios.request({
      url: `${apiPrefix}api/v1/certificate/statics`,
      method: 'get',
      params: this.state.queryCertificate,
    })
      .then((response) => {
        this.setState({ CertificateStatistics: response.data.data, countPerson: response.data.count_person, count: response.data.count });
      });
  }
  render() {
    const { CertificateStatistics, CertificateTypes, countPerson, count } = this.state;
    return (
      <div className="content">
        <div>
          <h3>证书统计查询</h3>
          <div className="stateBookTable">
            <div className="stateInput">
              <div className="stateBookName">
                <span>姓名</span>
                <input
                  type="text"
                  placeholder="请输入姓名"
                  onChange={e => this.handlOnChange(e.target.value, 'name')}
                />
              </div>
              <div className="stateSelectBook">
                <span>选择证书</span>
                <Select
                  showSearch
                  style={{ width: 360 }}
                  placeholder="选择证书"
                  onChange={value => this.handlOnChange(value, 'type_id')}
                  optionFilterProp="children"
                  filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                >
                  {
                    CertificateTypes.map((value, index) => (
                      <Option value={value.id} key={index}>{value.fullname}</Option>
                  ))
              }
                </Select>
              </div>
              <div className="firstData">
                <span>首次取证时间</span>
                <DatePicker
                  placeholder="开始时间"
                  style={{ marginLeft: 20 }}
                  onChange={value => this.handlOnChange(value, 'first_mfd_date_start')}

                />
                <DatePicker
                  placeholder="结束时间"
                  style={{ marginLeft: 20 }}
                  onChange={value => this.handlOnChange(value, 'first_mfd_date_end')}
                />
              </div>
              <div className="secdData">
                <span>取证时间</span>
                <DatePicker
                  placeholder="开始时间"
                  style={{ marginLeft: 20 }}
                  onChange={value => this.handlOnChange(value, 'mfd_date_start')}
                />
                <DatePicker
                  placeholder="结束时间"
                  style={{ marginLeft: 20 }}
                  onChange={value => this.handlOnChange(value, 'mfd_date_end')}
                />
              </div>

              <div className="stateBookButton">
                <button className="queryButton" onClick={this.query}>查询</button>
                <button className="excelButton">导出Excel</button>
              </div>
            </div>
            <div className="querySpan">
              <span>{`当前查询结果:人员数:${countPerson}，证书数量:${count}。`}</span>
            </div>
            <table>
              <thead>
                <tr>
                  <th className="w50">序号</th>
                  <th className="w120">姓名</th>
                  <th className="w80">员工编号</th>
                  <th className="w120">身份证号</th>
                  <th className="w120">证书名称</th>
                  <th className="w120">首次取证时间</th>
                  <th className="w120">取证时间</th>
                  <th className="w120">到期时间</th>
                  <th className="w120">状态</th>
                </tr>
              </thead>
              <tbody>
                {
                  CertificateStatistics.map((value, index) =>
                    value.certificates.map((cer, cIndex) =>
                      (
                        <tr key={index + cIndex}>
                          {(cIndex === 0) && <td rowSpan={value.certificates.length}>{index + 1}</td>}
                          {(cIndex === 0) && <td rowSpan={value.certificates.length}>{value.user.name}</td>}
                          {(cIndex === 0) && <td rowSpan={value.certificates.length} />}
                          {(cIndex === 0) && <td rowSpan={value.certificates.length}>{value.user.idcard}</td>}
                          <td>{cer.fullname}</td>
                          <td>{cer.first_mfd_date}</td>
                          <td>{cer.mfd_date}</td>
                          <td className={cer.show_state && 'expire-data'}>{cer.exp_date}</td>
                          <td><span className="expire">{cer.show_state && '已过期'}</span></td>
                        </tr>
                      )))
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}
